<template>
    <div>
        <div class="chain-list">
            <div style="display: flex; margin-bottom: 10px;">
                <div style="padding-top: 6px;"><img src="@/assets/chain.png" alt="" width="20px" height="20px"></div>
                <div class="chain-title">业务链列表</div>
            </div>
            <el-table :data="tableData" v-loading="loading" :border="true" style="width: 100%" :header-cell-style="{background:'#D8E8FF'}">
                <el-table-column type="index" label="序号" width="50" align="center" />
                <el-table-column prop="ChainDID" label="ChainDID" width="400" align="center" />
                <el-table-column prop="info.ChainId" label="ChainId" width="120" align="center" />
                <el-table-column prop="info.NodeAddress" label="NodeAddress" width="200" align="center" />
                <el-table-column prop="info.OrgId" label="OrgId" width="220" align="center" />
                <el-table-column prop="info.TlsHostName" label="TlsHostName" width="220" align="center" />
                <el-table-column prop="name" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" plain @click="signVCShow(scope.$index)">签发vc</el-button>
                    </template>
                </el-table-column>
                <el-table-column type="expand" >
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="auth : ">
                                <span>{{ props.row.certificate.auth }}</span>
                            </el-form-item>
                            <el-form-item label="chainDID : ">
                                <span>{{ props.row.certificate.chainDID }}</span>
                            </el-form-item>
                            <el-form-item label="doc : ">
                                <span>{{ props.row.certificate.doc }}</span>
                            </el-form-item>
                            <el-form-item label="signature : ">
                                <span>{{ props.row.signature }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog title="对业务链签发vc" :visible.sync="signVCVisible">
                <el-form :model="signForm">
                    <el-form-item label="key" :label-width="formLabelWidth">
                        <el-input v-model="signForm.key" autocomplete="off"  type="textarea"></el-input>
                    </el-form-item>
                    <el-form-item label="message" :label-width="formLabelWidth">
                        <el-input v-model="signForm.message" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="auth" :label-width="formLabelWidth">
                        <el-input v-model="signForm.auth" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="doc" :label-width="formLabelWidth">
                        <el-input v-model="signForm.doc" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancelSignVC()">取 消</el-button>
                    <el-button type="primary" @click="signVC()">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        
        
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [
                {
                    "ChainDID": "did:ctid:1EuEiRBBtuiWJcPh76CfnVVxvnt9zE1rnp",
                    "info": {
                        "ChainId": "chain_dcwjm",
                        "NodeAddress": "36.110.223.84:9000",
                        "OrgId": "69vkhhkorg.cm-048rqsevp9",
                        "TlsHostName": "consensus1-69vkhhkorg.cm-048rqsevp9"
                    },
                    "certificate": {
                        "doc": "",
                        "auth": "",
                        "chainDID": "",
                        "key": "",
                    },
                    "signature": ""
                },
                {
                    "ChainDID": "did:ctid:25s8K9ZTDfLK25HwXiaNNUTczoeMycfchr",
                    "info": {
                        "ChainId": "chain_xtrqc",
                        "NodeAddress": "36.110.219.89:9000",
                        "OrgId": "58vth1korg.cm-056tmrzvp4",
                        "TlsHostName": "consensus1-58vth1korg.cm-056tmrzvp4"
                    },
                    "certificate": {
                        "doc": "",
                        "auth": "",
                        "chainDID": "",
                        "key": "",
                    },
                    "signature": ""
                },
                {
                    "ChainDID": "did:ctid:27DwsjpH1TvTgbPdRWfRNsjoMsxF93ma5R",
                    "info": {
                        "ChainId": "chain_wsojd",
                        "NodeAddress": "36.111.221.87:9000",
                        "OrgId": "76vk1hkorg.cm-054stqetp3",
                        "TlsHostName": "consensus1-76vk1hkorg.cm-054stqetp3"
                    },
                    "certificate": {
                        "doc": "",
                        "auth": "",
                        "chainDID": "",
                        "key": "",
                    },
                    "signature": ""
                },
            ],
            signVCVisible: false,
            signForm: {
                key: "",
                message: "",
                auth: "",
                doc: "",
            },
            formLabelWidth: "120px",
            signVCIndex: -1,
            
            

        }
    },
    methods: {
        clearSignForm() {
            this.signForm = {
                key: "",
                message: "",
                auth: "",
                doc: "",
            }
        },
        signVCShow(index) {
            this.signVCVisible = true
            this.signForm.message = this.tableData[index].ChainDID
            this.signVCIndex = index
        },
        cancelSignVC() {
            this.signVCVisible = false
            this.clearSignForm()
        },
        signVC() {
            this.signVCVisible = false
            const characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
            let signLength = "abfc655eb14dedf133bf4f0df4902a14764c036b117b774458c624dbc2e3be3b".length
            let randomSign = ''
            for (let i = 0; i < signLength; i++) {
                const randomIndex = Math.floor(Math.random() * characters.length)
                randomSign += characters.charAt(randomIndex)
            }
            this.tableData[this.signVCIndex].signature = randomSign + "-"
            signLength = "574a490d7f5db4abd50d111ddc5968acbb240ee5991182a23db49a0d89ed9f02".length
            randomSign = ''
            for (let i = 0; i < signLength; i++) {
                const randomIndex = Math.floor(Math.random() * characters.length)
                randomSign += characters.charAt(randomIndex)
            }
            this.tableData[this.signVCIndex].signature += randomSign
            this.tableData[this.signVCIndex].certificate.auth = this.signForm.auth
            this.tableData[this.signVCIndex].certificate.doc = this.signForm.doc
            this.tableData[this.signVCIndex].certificate.chainDID = this.signForm.message
            this.tableData[this.signVCIndex].certificate.key = this.signForm.key
            this.clearSignForm()
            console.log(this.tableData)
        },
        
    }
}
</script>

<style lang="less" scoped>
.chain-list {
    padding: 20px 40px 30px 40px;
    .chain-title {
        font-size: 16px;
        font-weight: 600;
        line-height: 32px;
        margin: 0 10px;
    }
}

.el-button{
  border-radius: 16px;
  font-size: 12px;
  padding: 9px 15px;
  &.el-button--primary.is-plain{
    color: #409EFF;
    background: #E9F2FF;
    border: 1px solid #C4E1FF;
  }
  &.el-button--danger.is-plain{
    color: #FF9D9D;
    background: #FDEEEE;
    border: 1px solid #FFD4D4;
  }
}
//表格内容颜色
::v-deep .el-table__body tbody tr:nth-child(odd) {
  background-color: #FFFFFF;
}
::v-deep .el-table__body tbody tr:nth-child(even) td {
  background-color: #F1F8FF;
}
//表头文字样式
::v-deep .el-table__header-wrapper {
  thead {
    th{
      div{
        font-weight: 500;
        font-size: 14px;
        color: #333333
      }
    }
  }
}
::v-deep {
    .el-input--suffix .el-input__inner {
        height: 32px;
        width: 400px;
    }
}
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-left: 30px;
    margin-bottom: 0;
    width: 100%;
}
</style>